<template>
  <div class="demo-content">
    <h1>label定位的位置</h1>

    <section class="demo-text">
      <el-button v-for="item,index in positionlist" @click="changeposition(item)" :key="'b'+index">{{item}}</el-button>
      <canvas id="canvas" width="1200" height="600" ref="canvas"></canvas>
      <p style="text-align:right;padding-right:60px">@王睿杰 2019.1.25</p>
    </section>
  </div>
</template>
<script>
import {fabric} from  "@/js/fabric";
export default {
  data() {
    return {
      rect: null,
      canvas: null,
      positionlist: [
        "top,left",
        "top,center",
        "top,right",
        "middle,left",
        "middle,center",
        "middle,right",
        "bottom,left",
        "bottom,center",
        "bottom,right"
      ]
    };
  },
  methods: {
    changeposition(item) {
      this.rect.label = item;
      this.rect.labelStyle.position = item;
      this.canvas.requestRenderAll();
    }
  },
  mounted() {
    var canvas;
    //是否拖动
    var panning = false;
    this.$nextTick(() => {
      this.canvas = canvas = new fabric.Canvas("canvas");
      var rect1 = (this.rect = new fabric.Rect({
        top: 250,
        left: 250,
        fill: "#4FC3F7",
        width: 200,
        height: 200,
        strokeWidth: 2,
        stroke: "#880E4F",
        label: "top,left",
        labelStyle: {
          position: "top,left",
          align: "center"
        }
      }));
      canvas.add(rect1);
      //鼠标按下
    });
  }
};
</script>
<style>
canvas {
  border: 1px dashed black;
}
</style>

